<template>
  <div class="pay-container">
    <div class="order-info-box">
      <p>订单号:{{orderNo}}</p>
      <span><p>商品总价:</p><p class="money">{{totalPrice | currency}}</p></span>
    </div>
    <div class="line"></div>
    
    <div class="division"></div>
    <div class="pay-title-box">
      <p>需支付:</p>
      <p class="money">{{(totalPrice-freePrice) | currency}}</p>
    </div>
    <div class="line"></div>
    <div class="btn-box">
      <div @click="pay" class="pay-btn">微信付款</div>
    </div>
  </div>
</template>
<script>
  import {solveDate, fmoney} from './../../commons/js/utils'
  import {getVersion} from './../../commons/js/Global.js'
  import {MyGetWithToast, MyGet,MyPostWithToast} from './../../commons/js/MyRequest'
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default{
      data(){
          return{
            orderNo:"",
            totalPrice:0,
            freePrice:0,
            accountMoney:0,
            weiPay:{}
          }
      },
    methods:{
      pay(){
        var cityId = this.hotel.hotel.cityId;
        var openid = "007";
        var data = {
            orderType: 1,
            userId: this.userId,
            orderNo: this.orderNo,
            cityId: cityId,
            platform: "TOUCH",
            wechatOpenid: this.openid,
            version:getVersion()
        }
        console.log(data)
        MyPostWithToast("PayBean", this, function (result, that) {
              if (result.success){
                that.weiPay = result.data.weiPay;
                that.isWeixinJSBridge();
              }
          }, data);
      },
      isWeixinJSBridge(){
        console.log("isWeixinJSBridge");
        if (typeof WeixinJSBridge == "undefined") {
          console.log("isWeixinJSBridge is undefined");
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
          }
        } else {
          console.log("isWeixinJSBridge not undefined");
          this.onBridgeReady();
        }
      },
      onBridgeReady(){
        var that = this;
        WeixinJSBridge.invoke("getBrandWCPayRequest", {
            "appId": that.weiPay.appId,     //公众号名称，由商户传入
            "timeStamp": that.weiPay.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr": that.weiPay.nonceStr, //随机串
            "package": "prepay_id=" + that.weiPay.prepayId,
            "signType": "MD5",         //微信签名方式：
            "paySign": that.weiPay.paySign //微信签名
          }
          , function (res) {
            //that.$router.replace({path: '/orderList'})
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              that.$router.replace({path: '/orderList'})
            }
          });
      }
    },
    computed:{
      ...mapGetters({  
          hotel: 'getHotel',
          userId:'getUserId',
          openid:'getOpenid'  
      }),  
    },
    mounted(){
      this.orderNo = this.$route.query.orderNo;
      this.totalPrice = this.$route.query.totalPrice;
      this.freePrice = this.$route.query.freePrice;
      
      console.log();
    },
    filters:{
      currency:function (value) {
//        if (!value) return ''
        value = fmoney(value,2);
        return ("¥"+value)
      }
    }
  }
</script>
<style lang="less">
  @import "pay.less";
</style>
